import React, {Component } from 'react';
import { connect } from 'react-redux';
import { getSearchParams } from '&helpers/url'
import {Card, Table, Button, Space, Modal, Form, Input,Spin, Popconfirm} from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';

// function UpdateModal(props){}

function AddModal({ visible, onCreate, onCancel, title , okText, record = {}}) {
  const [form] = Form.useForm();
  
  return(
    <Modal
    visible={visible}
    title={title}
    okText={okText}
    cancelText="取消"
    onCancel={onCancel}
    // initialValues={...record}
    onOk={() => {
      form
        .validateFields()
        .then((values) => {
          !record.description && form.resetFields();
          onCreate(values, record.secondRequirementId);
        })
        .catch((info) => {
          
        });
    }}>
       <Form
        form={form}
        layout="vertical"
        name="form_second_add_modal"
        initialValues={
          {
            secondRequirementNo: record.secondRequirementSequence ? record.secondRequirementSequence.split('.')[1] : '',
            description: record.description ? record.description : ''
          }
        }
      >
        <Form.Item name="secondRequirementNo" label="指标点编号"
          rules={[{required: true,message: '请输入指标点编号'}]}
        >
          <Input placeholder='例如：1'/>
        </Form.Item>
        <Form.Item name="description" label="指标点描述" 
          rules={[{required: true,message: '请输入指标点描述'}]}>
          <Input.TextArea style={{minHeight:"200px"}} placeholder='指标点简介'/>
        </Form.Item>
      </Form>
    </Modal>
  )
}


class SecondRequire extends Component {

  state = {
    visible1: false,
    visible2: false,
    record: {}
  }
  columns = [
    {
      title: '毕业要求',
      dataIndex: 'secondRequirementSequence',
      key: 'secondRequirementSequence',
    },
    {
      title: '详细描述',
      dataIndex: 'description',
      key: 'description',
      render: (text) => {
        return(
          <span>{text.length <= 50 ? text : `${text.substring(0,50)}...`}</span>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {

        const deleteRow = () => {
          this.deletePoint(record.secondRequirementId)
        }

        return (
          <Space size="middle">
            <a onClick={() => this.showUpdataModal(record)}><EditOutlined />修改</a>
            <Popconfirm
              title="确认删除该要求?"
              onConfirm={deleteRow}
              onCancel={() => null}
              okText="确认"
              cancelText="取消"
            ><a><DeleteOutlined /> 删除</a></Popconfirm>
            
          </Space>
        )
      }
    },
  ];

  componentDidMount() {
    const { location } = this.props;
    const params = getSearchParams(location.search)
    this.props.getSecondRequire({firstRequirementId: params.id})
  }



  showAddModal = () => {
    this.setState({
      visible1: true
    })
  }

  hiddenAddModal = () => {
    this.setState({
      visible1: false
    })
  }

  add =(values) => {
    const { location, addSecondRequire } = this.props;
    const params = getSearchParams(location.search);
    // 
    addSecondRequire({...values, firstRequirementId: params.id});
    this.setState({
      visible1: false
    })
  }

  deletePoint = e => {
    this.props.deleteSecondRequire({secondRequirementId: e})
  }

  
  showUpdataModal = (record) => {
    this.setState({
      visible2: true,
      record: record
    })
  }

  hiddenUpdataModal = () => {
    this.setState({
      visible2: false,
    })
  }

  update = (values,id) => {
    const { updateSecondRequire } = this.props;
    // 
    updateSecondRequire({...values, secondRequirementId: id});
    this.setState({
      visible2: false
    })
  }


  render(){
    
    const { visible1, visible2, record } = this.state;
    const { store } = this.props;
    return(
      <Spin spinning={store.loading}>
        <Card title={<Button type='primary' key='1' onClick={this.showAddModal}>新增毕业要求</Button>}>
          <Table dataSource={store.secondRequireList} columns={this.columns} rowKey='secondRequirementId' />
          <AddModal onCreate={ this.add } onCancel={this.hiddenAddModal} visible={visible1} title='新增二级指标'
            okText='新增'/>
          <AddModal onCreate={ this.update } onCancel={this.hiddenUpdataModal} visible={visible2} title='修改二级指标'
            okText='修改' record={record} />
        </Card>
      </Spin>

    )
  }
}

const mapStateToProps = (state) => ({
  store: state.secondRequire
})

const mapDispatchToProp = (dispatch) => ({
  getSecondRequire: dispatch.secondRequire.getSecondRequire,
  addSecondRequire: dispatch.secondRequire.addSecondRequire,
  deleteSecondRequire: dispatch.secondRequire.deleteSecondRequire,
  updateSecondRequire: dispatch.secondRequire.updateSecondRequire
})

export default connect(
  mapStateToProps,
  mapDispatchToProp
)(SecondRequire);